<template>
  <div>
    <van-skeleton title avatar :row="15" :loading=main.isFirst>
    <div class="userInfo">
      <div class="userLeft">
        <div class="userRound">{{users.name}}</div>
      </div>

      <div class="userRight">
        <div class="user-info">{{users.name}}</div>
        
        <div class="user-info user-phone">{{users.account}}</div>
      </div>
    </div>

    <div class="tips salesDataTip MTS MBS">订单数据</div>

    <div>
      <van-cell value="内容" is-link  >
        <template #title>
          <span class="custom-title">已完成订单</span>
        </template>

        <template #value>
          <span><van-tag type="primary">{{data.completeOrderCount}}</van-tag></span>
        </template>
      </van-cell>

      <van-cell value="内容" is-link  >
        <template #title>
          <span class="custom-title">已发货订单</span>
        </template>

        <template #value>
          <span><van-tag type="primary">{{data.sendOrderCount}}</van-tag></span>
        </template>
      </van-cell>

      <van-cell value="内容" is-link  >
        <template #title>
          <span class="custom-title">未发货订单</span>
        </template>

        <template #value>
          <span><van-tag type="primary">{{data.notSendOrderCount}}</van-tag></span>
        </template>
      </van-cell>

      <van-cell value="内容" is-link  >
        <template #title>
          <span class="custom-title">已取消订单</span>
        </template>

        <template #value>
          <span><van-tag type="primary">{{data.cancelOrderCount}}</van-tag></span>
        </template>
      </van-cell>

      <van-cell value="内容" is-link  >
        <template #title>
          <span class="custom-title">累计总金额</span>
        </template>

        <template #value>
          <span><van-tag type="primary">{{data.sumMoney}}</van-tag></span>
        </template>
      </van-cell>


      <div class="van-hairline--bottom"></div>
    </div>

    <div className="tips shopDataTip MTS MBS">商品数据</div>

    <div>
      <van-cell value="内容" is-link>
        <template #title>
          <span class="custom-title">购买种类</span>
        </template>

        <template #value>
          <span><van-tag type="primary">{{data.categoryCount}} 种</van-tag></span>
        </template>
      </van-cell>
      <van-cell value="内容" is-link>
        <template #title>
          <span class="custom-title">购买数量</span>
        </template>

        <template #value>
          <span><van-tag type="primary">{{data.goodsCount}} 件</van-tag></span>
        </template>
      </van-cell>

      <div class="me-bottom">
        <!-- <van-button block type="primary" class="bound">新增商品</van-button> -->

        <van-button block type="danger" class="notbound" @click="()=>methods.destoryLogin()">解除绑定</van-button>
      </div>

    </div>
  </van-skeleton>
  </div>
</template>
    <script setup>
import { getMerchantStatistics } from "@/api/me";
import { loading } from "@/dto/loadingDto";
import myTokens from "@/utils/auth";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
const main = reactive(Object.assign({},loading,{
  name: "这是我的页面",
}));
const router= useRouter();
const users=ref("");
const data=ref({})
const methods={
  //销毁登录
  destoryLogin:()=>{
    //销毁token
      myTokens.removeToken();
      router.push("/login");

  },
  //获取页面统计数据
  getMerchantStatistics:async()=>{
   const res=await getMerchantStatistics();
   if(res.result===0){
      data.value=res.data;
      const user= JSON.parse(localStorage.getItem("user_merchant"));
      users.value=user;
      console.log(users);
     
      main.isFirst=false;
   }
 
  }
}


onMounted(()=>{
    main.isFirst=true;
    methods.getMerchantStatistics();
  })
</script>

 <style scoped>
.me-bottom{
  padding: 5px;
  box-sizing: border-box;
}
 .bound{
    margin-top: 10px;
    margin-bottom: 10px;
 }
.custom-title {
  font-weight: bold;
}
.user-info {
  font-weight: bold;
  border-top: 1px solid #eee;
  padding: 10px 0px 10px 10px;
}

.user-phone {
  font-weight: 500 !important;
  border-bottom: 1px solid #eee;
}
.userInfo {
  border-bottom: 1px solid #eee;
  display: flex;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.userLeft {
  font-weight: bold;
  flex: 1;
  margin-left: 15px;
  box-sizing: border-box;
  height: 110px;
  display: flex;
  align-items: center;
}

.userRight {
  margin-top: 10px;
  width: 300px;
  margin-right: 20px;
  margin-left: 25px;
}

.userRound {
  width: 80px;
  height: 80px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 80px;
  background: rgb(25, 137, 250);
  border-radius: 50%;
  margin: auto;
}
</style>


